@import "variables";

button {
    &.switch {
        background-color: $gray-400;
        padding: 0;
        border: 0;
        width: 2rem;
        border-radius: .75rem;
        padding: .1rem;
        transition: background-color ease-in-out .2s;

        span {
            background: #fff;
            display: block;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            transition: transform ease-in-out .2s;
        }

        &[aria-pressed="true"] {
            background-color: $green;

            span {
                transform: translateX(.8rem);
            }
        }

        &.switch-lg {
            width: 2.4rem;

            span {
                width: 1.3rem;
                height: 1.3rem;
            }

            &[aria-pressed="true"] {
                span {
                    transform: translateX(.9rem);
                }
            }
        }
    }
}

.btn {
    transition: background-color ease-in-out .15s, border-color ease-in-out .15s;

    &.btn-labeled {
        i {
            padding-right: .5rem;
            //border-right: solid 1px rgba(255,255,255,0.3);
            //margin-right: .5rem;
        }

        span {
            margin-right: .25rem;
        }
    }

    &.btn-loading {
        > [class^="fa"] {
            &:before {
                //content: "\f1ce";
                content: "\f110";
                display: inline-block;
                animation: btn-loading-animation 1s linear;
                animation-iteration-count: infinite;
            }
        }
    }

    &.btn-icon {
        position: relative;
        width: 2.3rem;
        height: 2.2rem;

        i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            margin-top: -1px;
        }
    }

    &.btn-light {
        background: #fff;
    }
}

.card-body {
    .btn {
        &.btn-light {
            background: $gray-100;
        }
    }
}

.btn-group {
    .dropdown-menu {
        min-width: 100%;
    }

    .btn-labeled {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@keyframes btn-loading-animation {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}